<template>
	<!-- 企业信息 -->
	<view class="conter" v-if="info">
		<cc-goback title="企业信息" color="#fff"></cc-goback>
		<view class="navigation_head"></view>
		<!-- 第一个模块 -->
		<view class="card">
			<view class="card_a">
				<view class="parta">
					<view class="card_aa card_word1">企业名称</view>
					<view class="card_ab card_word2">{{ info.name }}</view>
				</view>
				<view class="parta">
					<view class="card_ac card_word1">联系人</view>
					<view class="card_ad card_word2">{{ info.contact }}</view>
				</view>
			</view>
			<view class="card_a">
				<view class="parta">
					<view class="card_aa card_word1">状态</view>
					<view class="card_ab card_word2">{{ info.stateName }}</view>
				</view>
				<view class="parta">
					<view class="card_ac card_word1">联系方式</view>
					<view class="card_ad card_word2">{{ info.contactNumber }}</view>
				</view>
			</view>
			<view class="address">
				<view class="tx1">详细地址</view>
				<view class="tx2">{{ info.address }}</view>
			</view>
		</view>
		<!-- 第二个 -->

		<view class="card">
			<!-- 0-10 -->
			<view class="card_red">
				<view class="red_a">厂界</view>
				<view class="card_type col1" v-if="hjgc05_state == 1">正常</view>
				<view class="card_type col2" v-if="hjgc05_state == 3">报警</view>
				<view class="card_type col3" v-if="hjgc05_state == 2">预警</view>
				<view class="card_type col4" v-if="hjgc05_state == 0">离线</view>
				<view class="red_bb" :style="{ width: width1 + 'rpx' }"></view>
				<view
					class="red_c"
					v-if="hjgc05_value !== null"
					:class="
						hjgc05_state == 1 ? 'col1' : hjgc05_state == 3 ? 'col2' : hjgc05_state == 2 ? 'col3' : hjgc05_state == 0 ? 'col4' : ''
					"
				>
					{{ hjgc05_value}}{{ hjgc05_unit }}
					
				</view>
				<view class="red_c" v-if="hjgc05_value == null">-/-</view>
			</view>
			<view class="red_word">
				<view class="red_word1">
					<view class="word_a word_style1">{{ hja01001.value || '-/-' }}</view>
					<view class="word_a word_style2">温度（{{ hja01001.unit }}）</view>
				</view>
				<view class="red_word1">
					<view class="word_a word_style1">{{ hja01002.value }}</view>
					<view class="word_a word_style2">湿度（{{ hja01002.unit }}）</view>
				</view>
				<view class="red_word1">
					<view class="word_a word_style1">{{ hja01007.value }}</view>
					<view class="word_a word_style2">风速（{{hja01007.unit }}）</view>
				</view>
				<view class="red_word1">
					<view class="word_a word_style1">{{ etWindDirection(hja01008.value) }}</view>
					<view class="word_a word_style2">风向</view>
				</view>
				<view class="red_word1">
					<view class="word_a word_style1">{{hja01006.value }}</view>
					<view class="word_a word_style2">气压（{{hja01006.unit }}）</view>
				</view>
			</view>
		</view>
		<!-- 第三个 -->
		<view class="card">
			<!-- 0-500  -->
			<view class="card_red">
				<view class="red_a">排口</view>
				<view class="card_type col1" v-if="hjgc01_state == 1">正常</view>
				<view class="card_type col2" v-if="hjgc01_state == 3">报警</view>
				<view class="card_type col3" v-if="hjgc01_state == 2">预警</view>
				<view class="card_type col4" v-if="hjgc01_state == 0">离线</view>
				<view class="red_b" :style="{ width: width2 + 'rpx' }"></view>
				<view
					class="red_c"
					:class="
						hjgc01_state== 1 ? 'col1' :hjgc01_state == 3 ? 'col2' :hjgc01_state == 2 ? 'col3' :hjgc01_state == 0 ? 'col4' : ''
					"
				>
					{{ hjgc01_value == null ? '-/-' : hjgc01_value}}{{ hjgc01_unit }}
				</view>
			</view>

			<view class="red_word">
				<view class="red_word1">
					<view class="word_a word_style1">{{ hja01011.value }}</view>
					<view class="word_a word_style2">流速（{{ hja01011.unit }}）</view>
				</view>
			</view>
		</view>
		<!-- 第四个 -->
		<uni-card>
			<view class="change_head">最近24小时TOVC变化趋势</view>
			<view class="change_v">
				<view class="change_vv"></view>
				厂界
				<view class="change_vc"></view>
				排口
			</view>
			<view class="region"><echarts :option="option" style="height: 300px;" @click="echartsClick"></echarts></view>
		</uni-card>
		<!-- 第五个 -->
		<view class="card_message">
			<view class="message_a">工况信息</view>
			<view class="message_b" v-for="(e,i) in list" :key='i'>
				<view class="message_ba"></view>
				<view class="message_bb">{{e.name}}</view>
				
				<view class="message_bc message_color1" :class="e.state == 0 ? 'col1' : e.state == 1 ? 'col5' : e.state== 2 ? 'col3' : e.state == 3 ? 'col4' : ''">{{ e.stateName }}</view>
			</view>
			<!-- <view class="message_b" v-if="!info.warn > 0">
				<view class="message_ba"></view>
				<view class="message_bb">故障</view>
				<view class="message_bc message_color2">{{ info.warn }}</view>
			</view>
			<view class="message_b" style="margin-bottom: 35rpx;" v-if="!info.stop > 0">
				<view class="message_ba"></view>
				<view class="message_bb">停机</view>
				<view class="message_bc message_color3">{{ info.stop }}</view>
			</view>
			<view class="message_b" v-if="!info.error > 0">
				<view class="message_ba"></view>
				<view class="message_bb">离线</view>
				<view class="message_bc message_color3">{{ info.error }}</view>
			</view> -->
		</view>
	</view>
</template>

<script>
import echarts from '@/components/echarts/echarts.vue';
export default {
	components: {
		echarts
	},
	data() {
		return {
			id: '', //
			info: {},
				list:[],//工况列表
			width1: 10, //厂界长度
			width2: 0, //排口长度
			hjgc05_state:'',//
			hjgc05_value:'',//
			hjgc05_unit:'',//
			hjgc01_state:'',//
			hjgc01_value:'',//
			hjgc01_unit:'',//
			MAPInfo:'',//
			hja01001:'',
			hja01011:'',
			hja01002:'',
			hja01006:'',
			hja01007:'',
			hja01008:'',
			option: {
				xAxis: {
					type: 'category',
					data: ['6:00', '8:00', '10:00', '12:00', '14:00', '16:00']
				},
				yAxis: {
					type: 'value'
				},
				series: [
					{
						data: [720, 232, 188, 505, 110, 510],
						type: 'line',
						smooth: true,
						itemStyle: {
							color: {
								type: 'linear',
								x: 0,
								y: 0,
								x2: 0,
								y2: 1,
								colorStops: [
									{
										offset: 0,
										color: '#5B8FF9' // 0% 处的颜色
									},
									{
										offset: 1,
										color: '#FFFFFF' // 100% 处的颜色
									}
								],
								global: false // 缺省为 false
							}
						},
						lineStyle: {
							color: {
								type: 'linear',
								x: 0,
								y: 0,
								x2: 1,
								y2: 1,
								colorStops: [
									{
										offset: 0,
										color: '#5B8FF9' // 0% 处的颜色
									},
									{
										offset: 0.5,
										color: '#5B8FF9' // 0% 处的颜色
									},
									{
										offset: 1,
										color: '#5B8FF9' // 100% 处的颜色
									}
								],
								global: false // 缺省为 false
							}
						},
						areaStyle: {}
					},
					{
						data: [590, 212, 595, 200, 20, 190],
						type: 'line',
						smooth: true,
						itemStyle: {
							color: {
								type: 'linear',
								x: 0,
								y: 0,
								x2: 0,
								y2: 1,
								colorStops: [
									{
										offset: 0,
										color: '#FBC2EB' // 0% 处的颜色
									},
									{
										offset: 1,
										color: '#FFFFFF' // 100% 处的颜色
									}
								],
								global: false // 缺省为 false
							}
						},
						lineStyle: {
							color: {
								type: 'linear',
								x: 0,
								y: 0,
								x2: 1,
								y2: 1,
								colorStops: [
									{
										offset: 0,
										color: '#FBC2EB' // 0% 处的颜色
									},
									{
										offset: 0.5,
										color: '#FBC2EB' // 0% 处的颜色
									},
									{
										offset: 1,
										color: '#FBC2EB' // 100% 处的颜色
									}
								],
								global: false // 缺省为 false
							}
						},
						areaStyle: {}
					}
				]
			}
		};
	},
	onLoad(e) {
		console.log('e', e);
		this.id = e.id;
		this.get_info();
	},

	methods: {
		/**
		 * 点击事件
		 * @param {Object} params
		 */
		//获取企业信息
		get_info() {
			this.$http
				.get('/envirnment-air/app/homepage/enterpriseDetail', {
					enterpriseId: this.id
				})
				.then(res => {
					console.log('企业信息', res);
					if (res.code == '00000') {
						this.info = res.data.enterpriseAnalysis;
						this.hjgc05_state=res.data.enterpriseAnalysis.map.hjgc05.state
						this.hjgc05_value=res.data.enterpriseAnalysis.map.hjgc05.value
						this.hjgc05_unit = res.data.enterpriseAnalysis.map.hjgc05.unit
						this.hjgc01_state=res.data.enterpriseAnalysis.map.hjgc01.state
						this.hjgc01_value=res.data.enterpriseAnalysis.map.hjgc01.state
						this.hjgc01_unit = res.data.enterpriseAnalysis.map.hjgc01.unit
						this.hja01001 = res.data.enterpriseAnalysis.map.hja01001
						this.hja01011 = res.data.enterpriseAnalysis.map.hja01011
						this.hja01002 = res.data.enterpriseAnalysis.map.hja01002
						this.hja01006 = res.data.enterpriseAnalysis.map.hja01006
						this.hja01007 = res.data.enterpriseAnalysis.map.hja01007
						this.hja01008 = res.data.enterpriseAnalysis.map.hja01008
						this.list = res.data.workingCondition
						// 厂界的宽度 0-10
						if (res.data.enterpriseAnalysis.map.hjgc05.value < 10) {
							this.width1 = res.data.enterpriseAnalysis.map.hjgc05.value * 40;
						} else {
							this.width1 = 400;
						}
						// 排口的宽度 0-500
						if (res.data.enterpriseAnalysis.map.hjgc01.value < 500) {
							this.width2 = res.data.enterpriseAnalysis.map.hjgc01.value * 0.8;
						} else {
							this.width2 = 400;
						}
						//折线图的数据
						let arrX = []; //x轴数据
						let arrY1 = []; //y轴数据 厂界
						let arrY2 = []; //y轴数据 排口
						res.data.enterpriseAnalysis.boundaryTvocTrend.forEach(el => {
							arrX.push(el.key);
							arrY1.push(el.value);
						});
						res.data.enterpriseAnalysis.outletTvoctrend.forEach(el => {
							arrY2.push(el.value);
						});
						this.option.xAxis.data = arrX;
						console.log(this.option.xAxis.data, arrX);
						this.option.series[0].data = arrY1;
						this.option.series[1].data = arrY2;
					} else {
						uni.navigateBack({
							delta: 1
						});
					}
				});
		},
		echartsClick(params) {
			console.log('点击数据', params);
		},
		//风向
		etWindDirection(value) {
			if (value >= 0 && value <= 22.5) {
				return '北风';
			} else if (value >= 22.6 && value <= 67.5) {
				return '东北风';
			} else if (value >= 67.6 && value <= 112.5) {
				return '东风';
			} else if (value >= 112.6 && value <= 157.5) {
				return '东南风';
			} else if (value >= 157.6 && value <= 202.5) {
				return '南风';
			} else if (value >= 202.6 && value <= 247.5) {
				return '西南风';
			} else if (value >= 247.6 && value <= 292.5) {
				return '西风';
			} else if (value >= 292.6 && value <= 337.5) {
				return '西北风';
			} else if (value >= 337.6 && value <= 360.0) {
				return '北风';
			}
			return '';
		}
	}
};
</script>

<style lang="scss">
.navigation_head {
	height: calc(88rpx + var(--status-bar-height));
}

.conter {
	width: 100%;
	// height: 1732rpx;
	background-color: #f7f7f7;
	overflow: hidden;
}

.card {
	margin: 20rpx auto;
	width: 704rpx;
	// height: 240rpx;
	background-color: #fff;
	overflow: hidden;
	padding: 30rpx;
	box-sizing: border-box;
}

.change_head {
	font-size: 28rpx;
	font-family: PingFangSC-Medium, PingFang SC;
	font-weight: 500;
	color: #333333;
}

.change_v {
	display: flex;
	align-items: center;
	margin: 34rpx 0 0 30rpx;
	font-size: 22rpx;
	font-family: PingFangSC-Regular, PingFang SC;
	font-weight: 400;
	color: #8c8c8c;
}

.change_vv {
	width: 15rpx;
	height: 15rpx;
	margin-right: 16rpx;
	background-color: #5b8ff9;
	border-radius: 50%;
}

.change_vc {
	width: 15rpx;
	height: 15rpx;
	margin: 0 16rpx 0 36rpx;
	background-color: #fbc2eb;
	border-radius: 50%;
}

.region {
	transform: translateY(-10%);
}

.card_message {
	margin: 20rpx auto;
	width: 702rpx;
	// height: 360rpx;
	background-color: #fff;
	overflow: hidden;
}

.card_word1 {
	width: 116rpx;
	margin-right: 40rpx;
	text-align-last: justify;
	font-size: 26rpx;
	font-family: PingFang-SC-Medium, PingFang-SC;
	font-weight: 500;
	color: #999999;
}

.card_word2 {
	// width: 211rpx;
	font-size: 26rpx;
	font-family: PingFang-SC-Medium, PingFang-SC;
	font-weight: 500;
	color: #333333;
}

.card_a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 34rpx;

	.parta {
		flex: 1;
		display: flex;
		align-items: center;
	}

	// margin: 30rpx 0 0 30rpx;
}

.address {
	display: flex;

	.tx1 {
		font-size: 26rpx;
		font-family: PingFang-SC-Medium, PingFang-SC;
		font-weight: 500;
		color: #999999;
		margin-right: 40rpx;
		flex-shrink: 0;
	}

	.tx2 {
		font-size: 26rpx;
		font-family: PingFang-SC-Medium, PingFang-SC;
		font-weight: 500;
		color: #333333;
		// line-height: 37rpx;
	}
}

.card_aa {
	// margin: 0 30rpx;
}

.card_ab {
	// margin-right: 118rpx;
}

.card_ac {
	margin-right: 41rpx;
}

.card_red {
	display: flex;
	padding-top: 18rpx;
	align-items: center;

	.card_type {
		border: 1rpx solid #eee;
		font-size: 25rpx;
		font-family: PingFang-SC-Medium, PingFang-SC;
		font-weight: 500;
		color: #50a3ff;
		margin-right: 10rpx;
	}
}

.red_a {
	font-size: 26rpx;
	font-family: PingFang-SC-Medium, PingFang-SC;
	font-weight: 500;
	color: #999999;
	// margin: 54rpx 0 0 30rpx;
	margin-right: 20rpx;
}

.red_b {
	width: 364rpx;
	height: 48rpx;
	background: linear-gradient(270deg, #fbc2eb 0%, #a6c1ee 100%);
	border-radius: 0px 4px 4px 0px;
	// margin: 48rpx 0 0 30rpx;
	margin-right: 20rpx;
}

.red_bb {
	width: 400rpx;
	height: 48rpx;
	background: linear-gradient(90deg, #68c4ff 0%, #3792ff 100%);
	border-radius: 0px 4px 4px 0px;
	// margin: 48rpx 0 0 30rpx;
	margin-right: 20rpx;
}

.red_c {
	font-size: 24rpx;
	font-family: PingFang-SC-Medium, PingFang-SC;
	font-weight: 500;
	color: #333333;
	// margin: 55rpx 0 0 20rpx;
}

.red_word {
	display: flex;
	justify-content: space-around;
	margin-top: 29rpx;
}

.word_style1 {
	font-size: 28rpx;
	font-family: PingFangSC-Medium, PingFang SC;
	font-weight: 500;
	color: #333333;
	text-align: center;
	margin-bottom: 11rpx;
}

.word_style2 {
	font-size: 22rpx;
	font-family: PingFang-SC-Medium, PingFang-SC;
	font-weight: 500;
	color: #999999;
	text-align: center;
}

.message_a {
	font-size: 26rpx;
	font-family: PingFangSC-Medium, PingFang SC;
	font-weight: 500;
	color: #333333;
	margin: 29rpx 0 0 30rpx;
}

.message_b {
	position: relative;
	display: flex;
	align-items: center;
	margin-top: 45rpx;
	padding-bottom: 20px;
}

.message_ba {
	width: 4rpx;
	height: 18rpx;
	background: #3792ff;
	margin-left: 30rpx;
}

.message_bb {
	font-size: 30rpx;
	font-family: PingFang-SC-Medium, PingFang-SC;
	font-weight: 500;
	color: #333333;
	margin-left: 10rpx;
}

.message_bc {
	position: absolute;
	right: 0;
	font-size: 30rpx;
	font-family: PingFang-SC-Medium, PingFang-SC;
	font-weight: 500;
	margin-right: 30rpx;
}

.message_color1 {
	color: #5b8ff9;
}

.message_color2 {
	color: #ff3b30;
}

.message_color3 {
	color: #999999;
}
.col1 {
	color: #4ea1ff !important;
}
.col2 {
	color: #ff806c !important;
}
.col3 {
	color: #ffce6c !important;
}
.col4 {
	color: #94a5c7 !important;
}
.col5{
	color: #B0C9F9 !important;
}
</style>